iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
Modern Web

JavaScript 初心者筆記系列 第 14

JavaScript 初心者筆記: 迴圈簡介

  • 分享至 

  • xImage
  •  

迴圈可以重複執行同一組程式碼,幫我們處理不斷重複的事情。迴圈會檢測條件,如果條件為 true,便會執行程式碼;接著條件繼續被檢測、程式碼繼續執行,直到條件為 false 為止。

常見的迴圈有三種:

  • for 迴圈 - 需要以程式碼執行次數作為迴圈的條件。
  • while 迴圈 - 不知道程式碼執行次數時使用,迴圈條件非計數器。
  • do...while 迴圈 - 類似 while,但即使條件為 false 還是會執行程式碼至少一次

以下要介紹的都是以 for 迴圈為主。

建立迴圈

for(var i=0 ; i < 3 ; i++){
  console.log(i);
}
// 0,1,2

迴圈語法是這樣組成的:

  • var i = 0 - 建立初始條件,表示迴圈會從 0 開始算起。
  • i < 某數值 - 判斷條件,表示迴圈內的程式碼會一直重複執行,直到 i 不再小於指定的數量。
  • i++ - 更新條件,表示每執行過一次迴圈,i 就加 1。

i++的寫法

var i = 0; 的時候,i=i+1i+=1i++ 意思一樣,答案都是 1(減法同理)。

var total = 501;
total += 1         //502
total = total + 1  //502
total++            //501,但下一次呼叫 total 時值就變成 502 了

迴圈與陣列

在資料結構的交換上,陣列很常跟迴圈搭配使用,使用方法如下:

  1. 宣告一個變數,值等於用 length 去查詢資料來源陣列的筆數。
  2. 上述的變數放入 for 迴圈的條件中。
  3. 若我們希望陣列中每一個值都會被依序「點到名」的話,應該把 i 這個變數作為索引值寫進程式碼區塊。
var farmersTotal = farms.length;
for(var i = 0 ; i < farmersTotal ; i++){
  console.log('第' + (i+1) + '個農場主人是' + farms[i].farmers)
}

迴圈與判斷

從陣列資料庫裡,想要運用迴圈撈出特定條件的資料時,可以在迴圈內使用 if 判斷式。這種迴圈與函式的結合不只可以用來撈出資料,還可以做出各種判斷、賦予值、更改物件內的數值。在實作上,最好先寫出要達成的任務,再思考程式碼怎麼寫比較順。

//撈出哪些農場的小雞超過 100 隻以上
var farmersTotal = farms.length;
for( var i = 0 ; i < farmersTotal ; i++ ){
  if(farm[i].chick>100){
    console.log(farms[i].farmer + '的小雞超過 100 隻以上');
  }
}

上一篇
JavaScript 初心者筆記: 判斷式 - if...else / switch 篇
下一篇
JavaScript 初心者筆記: 迴圈如何加總
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言